/********* MAIN ELEMENTS *********/

/*** Header ***/

#main_header
{
    top: 0px;
    width: 100%;
    height: 50px;
    
    border-bottom: 1px solid blue;

    margin-bottom: 20px;
    
    background: #47A3FF;
}

#website_title, #header_options
{  
    float: left;
    height: 100%;
}

#website_title
{
    width: 40%;
    float: left;
    text-align: left;
    padding-left: 40px;
}

#header_options
{
    width: 50%;
    text-align: right;
    padding-right: 40px;
    vertical-align: middle;
    line-height: 50px;
}

#website_title > img
{
    vertical-align: middle;
}

#header_options > span
{
    display: inline-block;
    vertical-align: middle; 
}

/*** Content container ***/

#main_content
{
    width: 100%;
    
    text-align: center;
}


/********* MISC DEFINITIONS *********/

body
{
    margin: 0px !important;
}

.table_no_border, .table_no_border tr, .table_no_border td, .table_no_border th
{
    border: none !important;
}

.table_with_normal_padding td, .table_with_normal_padding th
{
    padding: 10px;
}

.full_length_table
{
    width: 100%;
}

h1, h2, h3
{
    margin-top: 0px;
    text-align: center;
}

p
{
    margin: 0px;
}

.small_button
{
    font-size: 70% !important;
}


/********* GUEST USER HOME & REGISTRATION *********/

#login_container
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    
    border: 1px solid black;
    padding: 30px;
}

#registration_container
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    
    border: 1px solid black;
    padding: 30px;
}

.login_button, registration_button
{
    margin-top: 20px;
}


/********* REGISTERED USER HOME *********/

/*** General definitions for all components ***/

.notification_sidebar, .calendar_container, .day_details_container, .no_calendar_container
{
    float: left;
    height: 85vh;
    box-sizing: border-box;
    overflow-y: auto;
}

/** Notification sidebar **/

.notification_sidebar
{
    width: 30%;
    border: 1px solid black;
    padding: 0px !important;
    padding-top: 30px !important;
    border-radius: 0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.notification_sidebar > div
{
    padding: 0px !important;
}


.notification_table, .notification_table tr, .notification_table td, .notification_table th
{
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
    border-collapse: collapse;
    
    font-size: 15px;
}

.notification_content
{
    margin-top: 10px;
    margin-bottom: 10px;
}

/** Calendar tab **/

.calendar_container
{
    width: 40%;
    border: none !important;
}

#calendar_header
{
    margin-top: 40px;
    
    margin-left: auto;
    margin-right: auto;
    
    width: 364px;
    line-height: 50px;
    height: 50px;
    
    background: #47A3FF;
    color: #F1F1F1;
}

.calendar_backward_button, .calendar_forward_button
{
    width: 50px;
    height: 50px;
}

.calendar_backward_button
{
    float: left;
}
.calendar_forward_button
{
    float: right;
}

.calendar_header_current_date
{
    font-weight: bold;
    font-size: 30px;
}

.calendar_table
{
    margin-left: auto;
    margin-right: auto;
    
    border-collapse: collapse;
}

.calendar_table, .calendar_table tr, .calendar_table td, .calendar_table th
{
    background: #93A393;
}

.calendar_table td, .calendar_table th
{
    width: 50px;
    height: 50px;
}

.calendar_table td > div, .calendar_table th > div
{
    width: 100%;
    height: 100%;
    line-height: 50px;
    position: relative;
    margin: 0px;
    padding: 0px;
    border: none;
}

.calendar_table td > div
{
    font-size: 20px;
}

.calendar_table td > div > a
{
    color: black;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    z-index: 10;
}

.calendar_table td > div > a:hover
{
    color: #47A3FF;
}

.calendar_current_day
{
    background: #47A3FF;
    color: #F1F1F1;
}

.calendar_day
{
    background: #DFE3DF;
}

.calendar_day_name
{
    background: #F5F7F5;
}

.calendar_empty_cell
{
    background: #F5F7F5;
}

/** Day details sidebar **/

.day_details_container
{
    width: 30%;
    border: 1px solid black;
    padding: 0px !important;
    padding-top: 30px !important;
    border-radius: 0px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.day_details_container > div
{
    padding: 0px !important;
}


.add_event_button
{
    font-size: 20px;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.add_event_button > span
{
    padding: 1px !important;
}

.invited_users_info
{
    border-bottom: 1px dashed #999;
    text-decoration: none; 
    font-style: italic;
    cursor: pointer;
    color: blue;
}

.alter_event_button
{
    width: 20px;
    height: 20px;
    display: inline;
    vertical-align: middle;
}

.day_details_table, .day_details_table tr, .day_details_table td, .day_details_table th
{
    border-top: 1px solid black !important;
    border-bottom: 1px solid black !important;
    border-collapse: collapse;
    font-size: 15px;
}

/** No calendar tab **/

.no_calendar_container
{
    width: 70%;
    border: 1px solid black;
    padding-top: 30px;
    padding-bottom: 0px;
}


/********* CALENDAR CREATION FORM *********/

#create_calendar_container
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    
    border: 1px solid black;
    padding: 30px;
}

.bad_weather_selection_table
{
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}


/********* EVENT FORM (CREATE/UPDATE) *********/

.event_form_container
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    
    border: 1px solid black;
    padding: 30px;
}

#invitations_section
{
    margin-top: 20px;
    margin-bottom: 20px;
}

#invitations_section > h3
{
    margin-bottom: 3px;
}

.invitation_picklist
{
    margin-left: auto;
    margin-right: auto;
}

.invitation_picklist td ul
{
    font-size: 15px;
    width: 300px !important;
}